<template>
  <div id="describe">
    <!-- 详情描述 -->
    <form class="m-panel-wrap">
      <!-- 产品参数 -->
      <w-panel-title title="产品参数"></w-panel-title>
      <div class="panel" v-if="goodsProperty.length > 0">
        <form class="form-inline" id="panelForm">
          <div class="form-group" v-for="(item, index) in goodsProperty">
            <w-label :must="false">{{item.name}}：</w-label>
            <div style="width:180px;display:inline-block;">
              <w-select v-model="item.selectedValue" :options="item.list"></w-select>
            </div>
            <!-- <w-input :validate="false" v-model="item.val"></w-input> -->
          </div>
          <br>
        </form>
      </div>
      <!-- 详情描述 -->
      <w-panel-title title="详情描述"></w-panel-title>
      <div class="panel panel-clear">
        <!-- 电脑端详情 -->
        <div class="describe-pc-detail">
           <w-rich-editor v-model="editorText"></w-rich-editor> 
        </div>
        <!-- 手机端详情 -->
        <!-- <div class="describe-app-detail" v-if="describeIndex === 1">
          <w-rich-editor v-model="wapEditText" :pc="web"></w-rich-editor>
        </div> -->
      </div>
    </form>
    <!-- 操作按钮 -->
    <div class="btn-group">
      <button class="btn main" @click="onPrev">上一步</button>
      <button class="btn main" @click="onNext">提交</button>
    </div>
  </div>
</template>

<script>
import app from '../../../main'
import { apiGoods } from '../../../common/api'
import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        msg: '1',
        describeIndex: 0,
        features: [],
        goodsProperty: [],
        goodsPropertyVal: [],
        goodsPropertyVals: [],
        pattern: '',
        toggle: false,
        editorText: '',
        value: [],
        iframeContent: null,
        goodsPropertys: [],
        Propertys: []
      }
    },
    computed: {
      ...mapGetters(['token', 'goodsId', 'feature', 'goodsDetails'])
    },
    methods: {
      // 上一页
      onPrev() {
        let index = this.$parent.$parent.curIndex
        if (index == 0) {
          this.$router.go(-1)
        } else {
          this.$parent.$parent.onChangeContent(index - 1)
        }
      },
      // 下一页
      onNext() {
        let _this = this
        this.value.forEach(function(element, index) {
          _this.goodsPropertys[index] = JSON.parse(element)[0]
        })
        let index = this.$parent.$parent.curIndex
        this.$parent.$parent.onChangeContent(index + 1)
        this.submitTextContent()
      },
      // 提交文本内容接口
      submitTextContent() {
        let goodId = ''
        if (this.$route.params.gdId) {
          goodId = this.$route.params.gdId
        } else {
          goodId = this.goodsId
        }
        if (this.goodsProperty && this.goodsProperty.length > 0) {
          this.goodsProperty = this.goodsProperty.filter((v) => {
            return v.selectedValue != 'null' && v.selectedValue
          })
          this.goodsProperty.forEach((property, index) => {
            if (property) {
              if (property.selectedValue && property.selectedValue != '' && property.selectedValue != 'null') {
                this.Propertys[index] = JSON.parse(property.selectedValue)
              }
            }
          })
        }
        if (!this.editorText || this.Propertys.length <= 0) {
           app.$toast('请上传详情')
           return
        }
        // 组合接口入参
        let data = {
          accessToken: this.token,
          goodsId: goodId,
          goodsDetails: this.editorText,
          goodsProperty: this.Propertys,
          src: ''
        }
        if (this.goodsDetails) {
          let oldAttr = []
          // 获取所有文本域的img
          this.goodsDetails.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
            oldAttr.push(capture)
          })
          let newAttr = []
          data.goodsDetails.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
            newAttr.push(capture)
          })
          data.src = ''
          oldAttr.forEach(function(oAttr, index) {
            let key = false
            newAttr.forEach(function(nAttr, index) {
              if (oAttr == nAttr) {
                key = true
                return
              }
            })
            if (!key) {
              data.src += oAttr + ','
            }
          })
        }
        apiGoods.submitTextContent(data).then((resp) => {
          data.src = ''
          app.$toast('添加成功')
          this.goodsPropertyVals = []
          this.$store.commit('clearAddGoodsInfo')
          setTimeout(() => {
            this.$router.push('/goods/store')
          }, 1000)
        })
      },
      // 点击新增标签
      // addNewTabA() {
      //   this.toggle = true
      // },
      // 提交新增标签
      // subAddNewTabS() {
      //   if (this.feature && this.feature.length > 0 && this.feature != 'null' && this.feature != 'undefined') {
      //     if (typeof (this.feature) == 'string') {
      //       this.features = JSON.parse(this.feature)
      //     } else {
      //       this.features = this.feature
      //     }
      //   }
      //   this.features.push({'pattern': this.pattern, val: ''})
      //   this.$store.commit('feature', this.features)
      //   this.toggle = false
      // },
      // 点击删除标签
      // doDelet(key) {
      //   this.features.splice(key, 1)
      //   this.$store.commit('feature', this.features)
      // },

      // 查询规格
      queryGoodstypeproperty() {
        let _this = this
        apiGoods.queryGoodstypeproperty(_this.$route.params.id).then((resp) => {
          if (resp.resultList.length <= 0) {
            return
          }
          _this.goodsProperty = resp.resultList
          resp.resultList.forEach((result, key) => {
            // 等待遍历的数组
            this.$set(result, 'list', [])
            result.value.split(',').forEach((element, index) => {
              result.list.push({
                value: JSON.stringify({name: result.name, val: element, id: result.id}),
                label: element
              })
            })
            if (_this.feature && _this.feature != '') {
              this.$set(result, 'selectedValue', JSON.stringify(JSON.parse(_this.feature)[key]))
            } else {
              this.$set(result, 'selectedValue', result.list ? result.list[0].value : '')
            }
          })
        })
      }
    },
    created() {
      setTimeout(() => {
        this.queryGoodstypeproperty()
        if (this.$store.getters.goodsDetails) {
          this.editorText = this.$store.getters.goodsDetails
        }
      }, 1500)
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../scss/_var.scss';
  @import '../../../scss/_panel.scss'; 
  #describe {
    padding-bottom: 30px;
    form {
      .form-group {
        .w-input {
          display: inline-block;
        }
      }
    }
    .btn-group {
      margin-top: 30px;
    }
    .panel-clear {
      padding: 0;
    }
    .describe-tab {
      background: #f7f7f7;
      font-size: 0; 
      button {
        width: 140px;
        height: 40px; 
        &.actived {
          color: #fff;
          background: $color-main;
        }
      }
    }
  }
</style>
